<template>
  <view v-if="!!c.state.isCreated" :class="viewClassNames">
    <i-biz-view-layout-panel
      v-if="!c.state.hasError"
      :container="c"
      :params="c.params"
      :context="c.context"
      :controls="controls"
      :modelData="viewLayoutPanel"
      :provider="c.providers[viewLayoutPanel.name]"
      @controllerAppear="onLayoutPanelCreated"
    />
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { computed } from "vue";
import {
  ViewController,
  IViewLayoutPanelController,
  getControlsByView,
} from "@ibiz-template/runtime";
import { useNamespace, useViewController } from "@/use";
import { viewProps } from "./i-biz-view";

const props = defineProps(viewProps);

const ns = useNamespace("view");
const c = useViewController((...args) => new ViewController(...args));

const controls = computed(() => {
  return getControlsByView(c.model).map((ctrl) => {
    const slotKey = ctrl.name || ctrl.id;
    return {
      modelData: ctrl,
      slotProps: c.slotProps[slotKey] || {},
    };
  });
});

const { viewType, sysCss, codeName, viewLayoutPanel } = c.model;

const onLayoutPanelCreated = (controller: IViewLayoutPanelController): void => {
  c.setLayoutPanel(controller);
};

const viewClassNames = computed(() => [
  ns.b(),
  ns.b(viewType.toLowerCase()),
  ns.m(codeName),
  sysCss?.cssName ? sysCss?.cssName : "",
  c.state.viewMessages.TOP ? "has-top-message" : "",
  c.state.viewMessages.BOTTOM ? "has-bottom-message" : "",
]);
</script>
<style lang="scss">
// 视图默认撑满父容器
@include b(view) {
  width: 100%;
  height: 100%;
}
</style>
